<template>
  <div class="py-2 w-full mx-auto" id="div-1">
    <a-flex vertical align="center">
      <a-typography-title :level="3" class="!mb-0">光环课程体系</a-typography-title>
      <a-typography-title :level="5" class="!text-[#ccc] !m-0">AURA SERIES</a-typography-title>
    </a-flex>
    <a-flex justify="center" gap="20" class="py-20">
      <a-typography-paragraph
        class="relative max-w-[230px] flex flex-col items-center px-5 py-10 bg-[#F4F5F6] shadow-md rounded-[4px]"
        v-for="(item, index) in list"
        :key="index"
      >
        <a-image :src="item.icon" class="w-full object-cover rounded-full z-10 mt-[-80px]" />
        <a-typography-text class="block relative pt-4 pb-2 font-bold">{{ item.name }}</a-typography-text>
        <a-typography-text class="w-8 h-1 bg-[#5A84FB]" />
        <a-typography-text class="block mt-4 text-[#999]">{{ item.desc }}</a-typography-text>
      </a-typography-paragraph>
    </a-flex>
    <a-row v-for="(item, index) in list" :key="index" :class="`px-40 py-20 ${index % 2 == 0 ? 'bg-[#EBECED]' : 'bg-[#fff]'}`">
      <a-col :span="6">
        <a-typography-text class="block pt-4 pb-2 text-[18px] font-bold">{{ item.name }}</a-typography-text>
        <a-typography-text class="block w-8 h-1 bg-[#5A84FB]" />
        <a-typography-text class="block pt-2 text-[#999]">{{ item.en }}</a-typography-text>
        <a-typography-text class="block mt-4 text-[#999]">{{ item.cnt }}</a-typography-text>
      </a-col>
      <a-col :span="18" class="pl-10">
        <a-flex :gap="15" wrap="wrap">
          <a-image
            :src="subItem.img"
            :preview="false"
            :width="550"
            :height="274"
            v-for="(subItem, subIndex) in item.list"
            :key="subIndex"
            class="rounded-[8px]"
          />
        </a-flex>
      </a-col>
    </a-row>
  </div>
</template>

<script setup>
  const list = [
    {
      icon: 'https://picsum.photos/id/1/96/96',
      name: '项目管理系列',
      desc: '从组织圾到应用级，初级项目经理到项目管理专家，光环项目管理体系全面默能。',
      en: 'SCHOOL OF PROJECT MANAGEMENT',
      cnt: '光环国际项日管理系残票程，发力于培训项口管理专业人才，打造管理請美帮助企业和管理吉实現自幾突和!',
      list: [
        { img: 'https://picsum.photos/id/6/550/274' },
        { img: 'https://picsum.photos/id/7/550/274' },
        { img: 'https://picsum.photos/id/8/550/274' },
        { img: 'https://picsum.photos/id/9/550/274' },
        { img: 'https://picsum.photos/id/10/550/274' },
        { img: 'https://picsum.photos/id/11/550/274' },
        { img: 'https://picsum.photos/id/12/550/274' },
      ],
    },
    {
      icon: 'https://picsum.photos/id/2/96/96',
      name: '产品经理系列',
      desc: '从组织圾到应用级，初级项目经理到项目管理专家，光环项目管理体系全面默能。',
      en: 'SCHOOL OF PROJECT MANAGEMENT',
      cnt: '光环国际项日管理系残票程，发力于培训项口管理专业人才，打造管理請美帮助企业和管理吉实現自幾突和!',
      list: [
        {
          img: 'https://picsum.photos/id/13/550/274',
        },
      ],
    },
    {
      icon: 'https://picsum.photos/id/3/96/96',
      name: '人工智能系列',
      desc: '从组织圾到应用级，初级项目经理到项目管理专家，光环项目管理体系全面默能。',
      en: 'SCHOOL OF PROJECT MANAGEMENT',
      cnt: '光环国际项日管理系残票程，发力于培训项口管理专业人才，打造管理請美帮助企业和管理吉实現自幾突和!',
      list: [
        {
          img: 'https://picsum.photos/id/14/550/274',
        },
        { img: 'https://picsum.photos/id/15/550/274' },
      ],
    },
    {
      icon: 'https://picsum.photos/id/4/96/96',
      name: '数字化系列',
      desc: '从组织圾到应用级，初级项目经理到项目管理专家，光环项目管理体系全面默能。',
      en: 'SCHOOL OF PROJECT MANAGEMENT',
      cnt: '光环国际项日管理系残票程，发力于培训项口管理专业人才，打造管理請美帮助企业和管理吉实現自幾突和!',
      list: [
        { img: 'https://picsum.photos/id/16/550/274' },
        { img: 'https://picsum.photos/id/17/550/274' },
        { img: 'https://picsum.photos/id/18/550/274' },
        { img: 'https://picsum.photos/id/19/550/274' },
      ],
    },
    {
      icon: 'https://picsum.photos/id/5/96/96',
      name: '国际学历系列',
      desc: '从组织圾到应用级，初级项目经理到项目管理专家，光环项目管理体系全面默能。',
      en: 'SCHOOL OF PROJECT MANAGEMENT',
      cnt: '光环国际项日管理系残票程，发力于培训项口管理专业人才，打造管理請美帮助企业和管理吉实現自幾突和!',
      list: [
        {
          img: 'https://picsum.photos/id/20/550/274',
        },
        { img: 'https://picsum.photos/id/21/550/274' },
        { img: 'https://picsum.photos/id/22/550/274' },
        { img: 'https://picsum.photos/id/23/550/274' },
        { img: 'https://picsum.photos/id/24/550/274' },
        { img: 'https://picsum.photos/id/25/550/274' },
        { img: 'https://picsum.photos/id/26/550/274' },
      ],
    },
  ];
</script>
<style scoped></style>
